<template>
	<Page title='基本表单' contentClass='p10'>
		<SubmitForm ref='formRef' :config='submitConfig'>
			<!-- 自定义表单 -->
			<template #my='{ f, n }'>
				<Input type='textarea' v-model:value='f[n]' p='请输入' />
			</template>
		</SubmitForm>
	</Page>
</template>

<script setup>
	const Page			= $.lazy(()=>import('#tp/content/page-content.vue'))
	const SubmitForm 	= $.lazy(()=>import('#cpt/form/submit-form.vue'))
	const Input 		= $.lazy(()=>import('@antd/form/input.vue'))
	const ImgCode = $.lazy(()=>import('#cpt/form-element/img-code.vue'))
	const PhoneCode = $.lazy(()=>import('#cpt/form-element/phone-code.vue'))
	
	let formRef = $ref()

	const data = [
		{ label:'vue', value:'vue' },
		{ label:'react', value:'react' }
	]
	
	const treeData = [
		{ label:'js', id:'js', children:[
			{ label:'vue', id:'vue', children:[
				{ label:'vue2', id:'vue2'},
				{ label:'vue3', id:'vue3'}
			] },
			{ label:'react', id:'react', }
		] },
		{ label:'java', id:'java', checkable:false, children:[
			{ label:'Spring', id:'Spring' },
			{ label:'Boot', id:'Boot' }
		] }
	]
	
	let param = $ref()
	const submitConfig = {
		api: '/api', 						// 提交接口
		// infoApi: '/back', 				// 回显接口
		// id: 1, 							// 必选参数，/id
		backParam: {}, 						// 回显接口参数
		param: { x:100, text: '123'}, 		// 提交参数，并可回显
		labelWidth: 's8',
		scroll: true,						// 是否滚动
		onInit: ({ param, formRef })=>{	// 初始运行
			formRef.setValue({table: ['vue']})
		},
		onBackData: ({ data, ref }) => {	// 自定义回显数据
			return { ...data }
		},
		onBackInfo: ({ data, ref }) => {	// 获取回显信息
			
		},
		onSubmit: ({param, formParam, formRef}) => { 			// 自定义提交，api 不起作用
			console.log('onSubmit', $fn.getValidParam(param))
		},
		setParam: param => {								// 仅修改个别参数，与 setNewParam 只能设置一个
			param['vue'] = '123'
			return param
		},
		// setNewParam: param => {								// 设置全新参数
		// 	return { a: 1 }
		// },
		onSuccess: ({data, param, formRef, colse}) => { 	// 成功后执行
			console.log('onSuccess')
		},
		onComplete: ({formRef,colse}) => { 					// 无论成功与失败，完成后执行
			console.log('onComplete')
		},
		onFail: ({data, formRef, colse}) => { 				// 接口调用失败时执行
			console.log('onFail')
		},
		onError: ({formRef, colse}) => { 					// 接口调用出错时执行
			console.log('onError')
		},
		// 自定义按钮
		// controls:[							
		// 	{ mode:'click', label:'自定义', click:()=> $fn.msg.success( '自定义' ) },
		// ],
		controls: {
			// size:'middle',
			// align:'start',
			ok:{ label:'提交' },
			reset:{},
			back:{ label:'我要返回', danger:true },
			before: [
				{ label:'前置按钮' }
			],
			after: [
				{ label:'后置按钮', disabled:true }
			],
			onBack: () => {						// 点击返回取消按钮执行
				$fn.msg.success( 'onBack' )
			},
			onReset: () => {					// 点击返回按钮执行
				$fn.msg.success( 'onReset' )
			},
		},
		data:[
			{ label:'文本', 		name:'text', 			type:'text' },
			{ label:'数字', 		name:'number', 			type:'number' },
			{ label:'下拉选择', 		name:'select', 	sname:'selectName', type:'select', 	api:'menu', nameStr:'title'},
			{ label:'下拉多选', 		name:'select2', 	type:'select', 	api:'menu', nameStr:'title', mul:1},
			{ label:'文本域', 		name:'textarea', 		type:'textarea' },
			//
			{ label:'日期', 		name:'date', 			type:'date', format:1, after:1 },
			{ label:'日期范围', 		name:'date-range', 		type:'date-range', format:1 },
			//
			{ label:'图片验证码', 	name:'img-code',		...$.render(ImgCode, { })},
			{ label:'手机号', 		name:'phone', 			half:1 },
			{ label:'手机验证码', 	name:'phone-code', half:1, 	...$.render(PhoneCode, { })},
			
			{ label:'选择', 		name:'select-content', 	type:'select-content', click:({ formRef, value })=>{
				value = value ? value.split(',') : null
				window.$formModalRef().open({
					title 		: '选择内容',
					width 	: '40%',
					labelWidth 	: 's8',
					onSubmit	: ({ param }) => {
						const { transfer } = param
						if($fn.hasArray(transfer)){
							formRef.setValue({ 'select-content': transfer.join(',')})
						}else{
							$fn.msg.warning('请先要添加的选择数据')
							return false
						}
					},
					data:[
					   { label:'穿梭框', name:'transfer', type:'transfer', data, height:200, value },
					]
				})
			} },
			{ label:'选择', 		name:'select-content2', type:'select-content', mode:'text', click:({ value })=>{
				value = value ? value.split(',') : null
				window.$formModalRef().open({
					title 		: '选择内容',
					width 	: '40%',
					labelWidth 	: 's8',
					onSubmit	: ({ param }) => {
						const { transfer } = param
						if($fn.hasArray(transfer)){
							formRef.setValue({ 'select-content2': transfer.join(',')})
						}else{
							$fn.msg.warning('请先要添加的选择数据')
							return false
						}
					},
					data:[
					   { label:'穿梭框', name:'transfer', type:'transfer', data, height:200, value },
					]
				})
			} },
			{ label:'多选', 		name:'checkbox-group', 	type:'checkbox-group', 	data },
			{ label:'单选', 		name:'radio', 			type:'radio', 			data },
			{ label:'单选', 		name:'radio-button', 	type:'radio-button', 	data, mode:'button', value:'vue' },
			{ label:'开关', 		name:'switch', 			type:'switch' },
			{ label:'上传图片', 		name:'upload', 			type:'upload' },
			{ label:'上传文件', 		name:'upload', 			type:'upload', mode:'text', mul:true, list:true, fileType:'img' },
			{ label:'穿梭框', 		name:'transfer', 		type:'transfer', 			data, value:['react'] },
			{ label:'下拉树选择',	name:'tree-select', 	type:'tree-select', 		data:treeData },
			{ label:'树选择', 		name:'tree', 			type:'tree', data:treeData, controls:false, value:['js','vue'], block:0 },
			{ label:'表格选择', 		name:'table', 			type:'table', data,
				table: {
					idStr:'value',
					height: 'auto',
					isRows:0,		// 返回数据是否为完整数据，否则，仅为 keys	
					cols: [
						{ title: '名称', 	dataIndex: 'label' },
						{ title: '内容', 	dataIndex: 'value' }
					],
					row:{},
					pag: false
				}
			},
			{ label:'自定义 slot ',	name:'my', 	type:'slot', fixed:0 },
			{ label:'自定义 render',	name:'render', 	type:'render', fixed:0, value:'100', ...$.render(Input)},
		]
	}

</script>